<template>
    <view class="manage_info_components contract_region">
        <div class="pub_input">
            <div class="li">
                <div class="title"><text class="xing">*</text> 选择省</div>
                <div class="input input_right">
                    <picker :value="form.province.key" :range="options.province" range-key="name"
                        @change="(data) => pickerChange('province', data)">
                        <input class="inp" type="text" :value="form.province.name" placeholder="请选择"
                            placeholder-style="color:#bbb" disabled>
                        <image class="right_icon" mode="aspectFit"
                            src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_24.png" />
                    </picker>
                </div>
            </div>
            <div class="li" v-if="form.province.code">
                <div class="title"><text class="xing">*</text> 选择市</div>
                <div class="input input_right">
                    <picker :value="form.city.key" :range="options.city" range-key="name"
                        @change="(data) => pickerChange('city', data)">
                        <input class="inp" type="text" :value="form.city.name" placeholder="请选择"
                            placeholder-style="color:#bbb" disabled>
                        <image class="right_icon" mode="aspectFit"
                            src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_24.png" />
                    </picker>
                </div>
            </div>
            <div class="li" v-if="form.city.code">
                <div class="title"><text class="xing">*</text> 选择县</div>
                <div class="input input_right">
                    <picker :value="form.country.key" :range="options.country" range-key="name"
                        @change="(data) => pickerChange('country', data)">
                        <input class="inp" type="text" :value="form.country.name" placeholder="请选择"
                            placeholder-style="color:#bbb" disabled>
                        <image class="right_icon" mode="aspectFit"
                            src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_24.png" />
                    </picker>
                </div>
            </div>
        </div>
        <div class="pub_input">
            <div class="li">
                <div class="title"><text class="xing">*</text> 区域名称</div>
                <div class="input">
                    <input class="inp" type="text" v-model="form.areaName" placeholder="请输入" placeholder-style="color:#bbb">
                </div>
            </div>
        </div>
        <div class="pub_btns" v-if="editId == ''" :style="{ 'bottom': bottom }">
            <div class="pub_btn pub_btn_big_normal" @click="toSubmit">保存并提交</div>
        </div>
        <div class="pub_btns" v-else :style="{ 'bottom': bottom }">
            <div class="pub_btn_normal pub_btn_normal_border pub_btn_small" @click="toDelete">删除</div>
            <div class="pub_btn pub_btn_small" @click="toSubmit">保存并提交</div>
        </div>
    </view>
</template>

<script>
export default {
    props: {
        editId: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            bottom: `calc(${getApp().globalData.statusBottomHeight}px + 32rpx)`,
            options: {
                province: [],
                city: [],
                country: [],
            },
            form: {
                areaName: '',
                province: { name: '', key: '', code: '' },
                city: { name: '', key: '', code: '' },
                country: { name: '', key: '', code: '' },
            },

            regionInfo: '',
        };
    },
    watch: {
        editId: {
            handler() {
                if (this.editId) this.getDetail();
                else {
                    this.getAddressInfo('province', 0);
                }
            },
            immediate: true,
            deep: true
        },
    },
    onLoad() { },
    methods: {
        pickerChange(type, e) {
            // console.log(type, e.detail.value);
            let info = this.options[type][e.detail.value];
            this.form[type] = {
                name: info.name,
                key: e.detail.value,
                code: info.code,
            };
            if (type == 'province') {
                this.getAddressInfo('city', info.code);
                this.form.city = this.$options.data().form.city;
                this.form.country = this.$options.data().form.country;
            }
            if (type == 'city') {
                this.getAddressInfo('country', info.code);
                this.form.country = this.$options.data().form.country;
            }
            if (type == 'country') { }
            this.$forceUpdate();
        },
        async getAddressInfo(level, pCode) {
            const res = await this.$request.get(`/mobile/manager/getRegion`, {
                pCode: pCode
            });
            if (res.code == 200) {
                this.options[level] = res.data;
                if (this.editId) {
                    let findIndex = res.data.findIndex(li => {
                        return li.code == this.regionInfo[`${level}Code`]
                    })
                    if (findIndex != -1) {
                        this.form[level] = {
                            name: res.data[findIndex].name,
                            key: findIndex,
                            code: res.data[findIndex].code,
                        };
                    }
                }
            }
        },
        async getDetail() {
            const that = this;
            that.$comFun.openLoading();
            const res = await that.$request.get(`/mobile/manager/area/${that.editId}`, {});
            // console.log(res);
            that.$comFun.closeLoading();
            if (res.code == 200) {
                this.form.areaName = res.data.areaName;
                this.regionInfo = res.data;
                this.getAddressInfo('province', 0);
                this.getAddressInfo('city', res.data.provinceCode);
                this.getAddressInfo('country', res.data.cityCode);
            }
        },
        async toSubmit() {
            const that = this;
            let form = JSON.parse(JSON.stringify(that.form));
            if (!form.province.code || !form.city.code || !form.country.code) {
                that.$comFun.toast('请选择省市县', 1000);
                return;
            }
            if (!form.areaName) {
                that.$comFun.toast('请填写方案名称');
                return;
            }
            uni.showModal({
                title: '提示',
                content: '是否确定保存？',
                success: async function (modalRes) {
                    if (modalRes.confirm) {
                        form.provinceCode = form.province.code;
                        form.cityCode = form.city.code;
                        form.countryCode = form.country.code;
                        delete form.province;
                        delete form.city;
                        delete form.country;
                        that.$comFun.openLoading();
                        let res;
                        if (that.editId) {
                            res = await that.$request.put('mobile/manager/area', {
                                ...form,
                                areaId: Number(that.editId)
                            });
                        } else {
                            res = await that.$request.post('mobile/manager/area', form);
                        }
                        // console.log(res);
                        that.$comFun.closeLoading();
                        if (res.code == 200) {
                            that.$comFun.toast('保存成功');
                            uni.$emit(`manageListReload_4`);
                            uni.$emit(`areaUpdateIndex`);
                            setTimeout(() => {
                                that.$comFun.closeWin();
                            }, 1000)
                        } else {
                            that.$comFun.toast(res.msg);
                        }
                    }
                }
            });
        },
        toDelete() {
            const that = this;
            uni.showModal({
                title: '提示',
                content: '是否确定删除？',
                success: async function (modalRes) {
                    if (modalRes.confirm) {
                        that.$comFun.openLoading();
                        const res = await that.$request.delete(`/mobile/manager/area/${that.editId}`);
                        // console.log(res);
                        that.$comFun.closeLoading();
                        if (res.code == 200) {
                            that.$comFun.toast('删除成功');
                            uni.$emit(`manageListReload_4`);
                            uni.$emit(`areaUpdateIndex`);
                            setTimeout(() => {
                                that.$comFun.closeWin();
                            }, 1000)
                        } else {
                            that.$comFun.toast(res.msg);
                        }
                    }
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped>
@import "@/common/css/manage.scss";
</style>
